<template>
  <footer class="app-footer">
    <div class="footer-container">
      <!-- 底部主要内容 -->
      <div class="footer-main">
        <!-- 服务保障 -->
        <div class="footer-service">
          <div class="service-item">
            <el-icon class="service-icon"><User /></el-icon>
            <span class="service-text">正品保障</span>
          </div>
          <div class="service-item">
            <el-icon class="service-icon"><ShoppingCart /></el-icon>
            <span class="service-text">闪电发货</span>
          </div>
          <div class="service-item">
            <el-icon class="service-icon"><HelpFilled /></el-icon>
            <span class="service-text">7天无理由退换</span>
          </div>
          <div class="service-item">
            <el-icon class="service-icon"><CreditCard /></el-icon>
            <span class="service-text">安全支付</span>
          </div>
          <div class="service-item">
            <el-icon class="service-icon"><Phone /></el-icon>
            <span class="service-text">24小时客服</span>
          </div>
        </div>
        
        <!-- 底部导航 -->
        <div class="footer-nav">
          <!-- 关于我们 -->
          <div class="nav-column">
            <h3 class="nav-title">关于我们</h3>
            <ul class="nav-list">
              <li><a href="#" class="nav-link">公司简介</a></li>
              <li><a href="#" class="nav-link">新闻中心</a></li>
              <li><a href="#" class="nav-link">加入我们</a></li>
              <li><a href="#" class="nav-link">联系方式</a></li>
            </ul>
          </div>
          
          <!-- 购物指南 -->
          <div class="nav-column">
            <h3 class="nav-title">购物指南</h3>
            <ul class="nav-list">
              <li><a href="#" class="nav-link">注册与登录</a></li>
              <li><a href="#" class="nav-link">购物流程</a></li>
              <li><a href="#" class="nav-link">支付方式</a></li>
              <li><a href="#" class="nav-link">常见问题</a></li>
            </ul>
          </div>
          
          <!-- 配送服务 -->
          <div class="nav-column">
            <h3 class="nav-title">配送服务</h3>
            <ul class="nav-list">
              <li><a href="#" class="nav-link">配送范围</a></li>
              <li><a href="#" class="nav-link">配送时间</a></li>
              <li><a href="#" class="nav-link">配送费用</a></li>
              <li><a href="#" class="nav-link">物流查询</a></li>
            </ul>
          </div>
          
          <!-- 售后服务 -->
          <div class="nav-column">
            <h3 class="nav-title">售后服务</h3>
            <ul class="nav-list">
              <li><a href="#" class="nav-link">退换货政策</a></li>
              <li><a href="#" class="nav-link">退换货流程</a></li>
              <li><a href="#" class="nav-link">投诉与建议</a></li>
              <li><a href="#" class="nav-link">售后保障</a></li>
            </ul>
          </div>
          
          <!-- 联系我们 -->
          <div class="nav-column contact-us">
            <h3 class="nav-title">联系我们</h3>
            <div class="contact-info">
              <p class="contact-phone">客服热线：400-123-4567</p>
              <p class="contact-time">工作时间：9:00-21:00</p>
              <div class="contact-social">
                <a href="#" class="social-icon" title="微信"><el-icon><MessageRound /></el-icon></a>
                <a href="#" class="social-icon" title="微博"><el-icon><Share2 /></el-icon></a>
                <a href="#" class="social-icon" title="抖音"><el-icon><VideoPlay /></el-icon></a>
                <a href="#" class="social-icon" title="小红书"><el-icon><Picture /></el-icon></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 底部版权信息 -->
      <div class="footer-copyright">
        <div class="copyright-links">
          <a href="#" class="copyright-link">隐私政策</a>
          <span class="link-separator">|</span>
          <a href="#" class="copyright-link">用户协议</a>
          <span class="link-separator">|</span>
          <a href="#" class="copyright-link">知识产权</a>
          <span class="link-separator">|</span>
          <a href="#" class="copyright-link">法律声明</a>
          <span class="link-separator">|</span>
          <a href="#" class="copyright-link">网站地图</a>
        </div>
        <div class="copyright-text">
          <p>© 2023 AI Shop 人工智能商城. 保留所有权利.</p>
          <p>ICP备案号：京ICP备12345678号-1 营业执照</p>
        </div>
        <div class="copyright-payment">
          <el-icon class="payment-icon"><Wallet /></el-icon>
          <el-icon class="payment-icon"><Wallet /></el-icon>
          <el-icon class="payment-icon"><Wallet /></el-icon>
          <el-icon class="payment-icon"><CreditCard /></el-icon>
          <el-icon class="payment-icon"><CreditCard /></el-icon>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup>
// 所有Element Plus图标已在main.js中全局注册，无需单独导入
</script>

<style scoped>
.app-footer {
  background-color: #fff;
  border-top: 1px solid $border-color;
  margin-top: auto;
}

.footer-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 服务保障 */
.footer-service {
  display: flex;
  justify-content: space-around;
  padding: 30px 0;
  border-bottom: 1px solid $border-color;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.service-icon {
  font-size: 32px;
  color: $primary-color;
}

.service-text {
  font-size: $font-size-base;
  color: $text-color;
  font-weight: 500;
}

/* 底部导航 */
.footer-nav {
  display: flex;
  justify-content: space-between;
  padding: 30px 0;
  border-bottom: 1px solid $border-color;
}

.nav-column {
  flex: 1;
}

.nav-title {
  font-size: $font-size-lg;
  color: $text-color;
  font-weight: bold;
  margin-bottom: 20px;
}

.nav-list {
  list-style: none;
  padding: 0;
}

.nav-list li {
  margin-bottom: 12px;
}

.nav-link {
  color: $text-color-secondary;
  font-size: $font-size-sm;
  text-decoration: none;
  transition: color 0.3s;
}

.nav-link:hover {
  color: $primary-color;
}

/* 联系我们 */
.contact-us {
  max-width: 200px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-phone {
  font-size: $font-size-base;
  color: $text-color;
  font-weight: 500;
}

.contact-time {
  font-size: $font-size-sm;
  color: $text-color-secondary;
}

.contact-social {
  display: flex;
  gap: 15px;
  margin-top: 10px;
}

.social-icon {
  font-size: 24px;
  color: $text-color-secondary;
  transition: color 0.3s;
}

.social-icon:hover {
  color: $primary-color;
}

/* 底部版权信息 */
.footer-copyright {
  padding: 20px 0;
  text-align: center;
}

.copyright-links {
  margin-bottom: 15px;
}

.copyright-link {
  color: $text-color-secondary;
  font-size: $font-size-sm;
  text-decoration: none;
  transition: color 0.3s;
}

.copyright-link:hover {
  color: $primary-color;
}

.link-separator {
  color: $text-color-placeholder;
  margin: 0 10px;
}

.copyright-text {
  margin-bottom: 15px;
}

.copyright-text p {
  color: $text-color-placeholder;
  font-size: $font-size-xs;
  margin: 5px 0;
}

.copyright-payment {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.payment-icon {
  width: 40px;
  height: 25px;
  font-size: 24px;
  color: $primary-color;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .footer-service {
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .service-item {
    flex: 1 1 20%;
  }
}

@media (max-width: 992px) {
  .footer-nav {
    flex-wrap: wrap;
    gap: 30px;
  }
  
  .nav-column {
    flex: 1 1 45%;
  }
}

@media (max-width: 768px) {
  .footer-container {
    padding: 0 10px;
  }
  
  .footer-service {
    padding: 20px 0;
  }
  
  .service-icon {
    font-size: 24px;
  }
  
  .service-text {
    font-size: $font-size-sm;
  }
  
  .footer-nav {
    padding: 20px 0;
  }
  
  .nav-title {
    font-size: $font-size-base;
    margin-bottom: 15px;
  }
  
  .nav-column {
    flex: 1 1 100%;
  }
  
  .copyright-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
  
  .link-separator {
    display: none;
  }
  
  .copyright-payment {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
  
  .payment-icon {
    width: 30px;
    height: 20px;
  }
}

@media (max-width: 480px) {
  .footer-service {
    flex-direction: column;
    align-items: center;
  }
  
  .service-item {
    flex: 1 1 100%;
  }
  
  .footer-copyright {
    padding: 15px 0;
  }
  
  .copyright-text p {
    font-size: 12px;
  }
}
</style>